<template>
  <view class="container">
    <!-- Tab 切换 -->
    <view class="tabs">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab', activeTab === index ? 'active' : '']"
        @click="switchTab(index)"
      >
        {{ tab }}
      </view>
    </view>

    <!-- Tab 内容 -->
    <view class="content">
      <view v-if="activeTab === 0">
        查询中内容
      </view>
      <view v-else>
        已完成内容
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabs: ['询价中', '已完成'], // Tab 名称
        activeTab: 0, // 当前激活的 Tab 索引
      };
    },
    methods: {
      // 切换 Tab
      switchTab(index) {
        this.activeTab = index;
      },
    },
  };
</script>

<style>
/* 页面容器 */
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Tab 样式 */
.tabs {
  display: flex;
  background-color: #f5f5f5;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 10rpx 0;
  color: #333;
  font-size: 14px;
  border-bottom: 2px solid transparent;
}

.tab.active {
  color: #fff;
  background-color: #007aff; /* 蓝色背景 */
  border-bottom-color: #007aff;
}

/* 内容区域 */
.content {
  flex: 1;
  padding: 20rpx;
}
</style>
